16. Convenience in Webpack

Congratulations!

We have made our tedious way through all of the webpack concepts. Now we get to actually make things awesome.

As you probably noted during this lesson so far, there are some things about the process we have now that aren’t exactly smooth. Overall, I wouldn’t call our set up a good dev experience and we don’t have production set up at all. It is functional, and that’s about it. But the whole point of using all these tools is to make our lives easier. So…what’s going wrong? Let’s use what we’ve learned to make some improvements.

Up next, have you noticed how we often have to remove the dist folder manually before re-running the build script? From what I have seen, when you rebuild, new code will be added to the bundled files, but if there was old code that you got rid of, webpack build does not remove the old stuff. So, we have been removing the dist folder via the terminal and before rebuilding.

Really though, that is an extra and unnecessary step. If we wanted to go really low tech, we could just edit our build script:

rm -rf dist && webpack-dev-server  --config webpack.dev.js --open

And there’s really nothing wrong with that. Honestly, being comfortable customizing your npm scripts will make so many things easier. But, it is doing a little bit of extra work. That script blindly deletes everything and then rebuilds it, even if 99% of the code remained the same.

To be a little more efficient, there is a webpack plugin called Clean. From its documentation:

By default, this plugin will remove all files inside webpack's output.path directory, as well as all unused webpack assets after every successful rebuild.

Now, some people will choose to go with the simpler blanket dist folder delete, but just to try it, lets install the clean plugin.

npm i -D clean-webpack-plugin

Then, as we learned before, to make webpack use a plugin, we have to do two things:

Add a require statement to the top of the webpack config file:

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

Add the plugin to Plugins array in the module.exports. The clean plugin is a good example of a plugin that allows for various options. Take a look at this:

We could use CleanWebpackPlugin like this:

    new CleanWebpackPlugin()

And the above would function. When there are no options passed in, a plugin will run all the default settings, but we can also pass in our custom selections of the various plugin options, like this:

        new CleanWebpackPlugin({
                // Simulate the removal of files
                dry: true,
                // Write Logs to Console
                verbose: true,
                // Automatically remove all unused webpack assets on rebuild
                cleanStaleWebpackAssets: true,
                protectWebpackAssets: false
        })

You can’t know what options a plugin allows without reading the documentation for that plugin.

Add that code to your wepack.dev.js file and rerun the build script, now you’ll see a few lines added to the webpack output that tell you the clean plugin is functioning.

QUESTION:

Reflect

What do you think are the most time-saving developer tools for you? Which tools do you absolutely want in a development environment, or which could you do without?

QUESTION:

Interview Question

You start work on a project with webpack already installed, but there is no specific build for production. Walk me through the steps of setting up a production environment in webpack